<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      .center {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  
  <body>
    <div class="style-class"></div>
    <div class="func-class"></div>
    <div class="func-class"></div>
    <div class="func-class"></div>
  </body>
  
  <script>
    /* HTMLElement.style */
    let styleDiv = document.querySelector('.style-class');
    styleDiv.textContent = '文字';
    styleDiv.style.width = '100px';
    styleDiv.style.height = '100px';
    styleDiv.style.backgroundColor = 'skyblue';
    styleDiv.style.color = 'pink';
    styleDiv.style.display = 'flex';
    styleDiv.style.justifyContent = 'center';
    styleDiv.style.alignItems = 'center';
    
    /* setAttribute() */
    {
      // 正确示范
      let funcDiv = document.querySelectorAll('.func-class')[0];
      funcDiv.textContent = '文字';
      funcDiv.setAttribute('style', 'width:100px;height:100px;background-color:skyblue;color:pink;margin-top:10px');
      funcDiv.setAttribute('class', 'func-class center');
    }
    {
      // 错误示范：使用setAttribute设置的重复属性将被覆盖
      let funcDiv = document.querySelectorAll('.func-class')[1];
      funcDiv.textContent = '覆盖';
      funcDiv.setAttribute('style', 'width:100px');
      funcDiv.setAttribute('style', 'height:100px');
      funcDiv.setAttribute('style', 'background-color:skyblue');
      funcDiv.setAttribute('style', 'color:pink');
    }
    {
      let funcDiv = document.querySelectorAll('.func-class')[2];
      funcDiv.textContent = '文字';
      
      //方法补充：createAttribute()
      let attrStyle = document.createAttribute('style');
      attrStyle.value = 'width:100px;height:100px;background-color:skyblue;color:pink;margin-top:10px';
      funcDiv.setAttributeNode(attrStyle);
      let attrClass = document.createAttribute('class');
      attrClass.value = 'center';
      funcDiv.setAttributeNode(attrClass);
      
      //方法补充：getAttribute()
      console.log(funcDiv.getAttribute('class'));//center
      console.log(funcDiv.getAttribute('style'));//width:100px;height:100px;background-color:skyblue;color:pink;margin-top:10px
    }
  </script>
</html>